<template>
  <div class="add container">
      <Alert v-if="alert" :msg ="alert"></Alert>
     <h4 class="page-header">添加用户</h4>
     <form action="" v-on:submit="addInfo">
         <div class="well">
             <h5>用户信息</h5>
             <div class="form-group">
                 <label>姓名</label>
                 <input type="text" class="form-control" placeholder="name" v-model="customer.name">
             </div>
             <div class="form-group">
                 <label>电话</label>
                 <input type="text" class="form-control" placeholder="phone" v-model="customer.phone">
             </div>
             <div class="form-group">
                 <label>邮箱</label>
                 <input type="text" class="form-control" placeholder="email" v-model="customer.email">
             </div>
             <div class="form-group">
                 <label>学历</label>
                 <input type="text" class="form-control" placeholder="education" v-model="customer.education">
             </div>
             <div class="form-group">
                 <label>毕业学校</label>
                 <input type="text" class="form-control" placeholder="graduationSchool" v-model="customer.graduationSchool">
             </div>
             <div class="form-group">
                 <label>职业</label>
                 <input type="text" class="form-control" placeholder="profession" v-model="customer.profession">
             </div>
             <div class="form-group">
                 <label>个人简介</label>
                 <textarea rows="10" class="form-control" v-model="customer.profile" placeholder="profile"></textarea>
             </div>
             <button type="submit" class="btn btn-primary">增加</button>
         </div>
     </form>
  </div>
</template>

<script>
import Alert from "./Alert"
export default {
  name: "add",
  data() {
    return {
        customer:{},
        alert:""
    };
  },
  methods: {
      addInfo(e){
          if(!this.customer.name){
              this.alert = "亲输入您的姓名！"
          }else if(!this.customer.phone){
              this.alert = "请输入您的手机号！"
          }else if(!this.customer.email){
              this.alert = "请输入电子邮件地址！"
          }else{
              let newCustomer ={
                  name:this.customer.name,
                  phone:this.customer.phone,
                  email:this.customer.email,
                  education:this.customer.education,
                  graduationSchool:this.customer.graduationSchool,
                  profession:this.customer.profession,
                  profile:this.customer.profile
              }
              this.$http.post("http://localhost:3010/users",newCustomer).then(function(response){
                  console.log(response);
                  if(response.ok == true){
                      this.$router.push({
                          path:"/",query:{alert:"用户信息添加成功！"}
                      })
                  }else{

                  }
              })
              e.preventDefault();
          }
          e.preventDefault();
      }
  },
  components:{
      Alert
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
